<template>
    <div>
        <el-container>
            <el-header style="height: auto;padding: 0">
                <HeaderComponent></HeaderComponent>
            </el-header>
            <el-container  style="padding: 2vw;flex-direction: column"  >
                <el-header v-if="this.token !== '' && this.step !== 5" style="padding-left: 0">
                    <el-button type="primary" @click="prev">返回上一步</el-button>
                </el-header>
                <el-main style="padding: 0" class="bgcolor-white">
                    <Verify v-if="'' === this.token"></Verify>
                    <Cases v-if="'' !== this.token && this.step === 1"></Cases>
                    <Dsr  v-show="'' !== this.token && this.step === 2"></Dsr>
                    <Property ref="comproperty" v-show="'' !== this.token && this.step === 3"></Property>
<!--                    <Upload v-show="'' !== this.token && this.step === 4"></Upload>-->
                    <Confirm v-if="'' !== this.token && this.step === 4"></Confirm>
                    <Complete style="height: 100%" v-if="'' !== this.token && this.step === 5"></Complete>

                </el-main>

            </el-container>
        </el-container>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex'
    import HeaderComponent from '@/components/Header/index'
    import Cases from "./Form/Cases";
    import Verify from "@/components/Form/Verify";
    import Dsr from "./Form/Dsr";
    import Property from "./Form/Property";
    import Upload from "./Form/Upload";
    import Confirm from "./Form/Confirm";
    import Complete from "./Form/Complete";
    export default {
        name: "Index",
        components: {
            Verify,
            HeaderComponent,Cases,Dsr,Property,Confirm,Complete,Upload
        },

        data() {

            return {
                activities: [

                    {
                        content: '身份验证',
                        size: 'large',
                        color: ""
                    }, {
                        content: '选择案件',
                        size: 'large',
                        color: ""
                    }, {
                        content: '资料完善',
                        size: 'large',
                        color: ""
                    }, {
                        content: '财产信息填写',
                        size: 'large',
                        color: ""
                    },
                    // {
                    //     content: '资料拍照上传',
                    //     size: 'large',
                    //     color: ""
                    // },
                    {
                        content: '确认提交',
                        size: 'large',
                        color: ""
                    }, {
                        content: '完成',
                        size: 'large',
                        color: ""
                    }
                ]
            }
        },

        created() {
            this.resetToken()
        },


        computed: {
            ...mapState(['token', 'step']),



            getActivities(){

                this.activities.map((v,i)=>{
                    v.icon = "";
                    if (i < this.step) {
                        v.color ="rgb(11, 189, 135)"
                        v.icon = "el-icon-check";
                    }else if (i === this.step) {
                        v.color = "#3f9bfa"
                    }else{
                        v.color = "";
                    }
                })
                return this.activities;
            }
        },

        methods: {
            ...mapActions([
                'getToken', 'setToken', 'resetToken'
                , 'setStep','setAH','setTrialExtraId'
            ]),
            onTrialExtraTypeChange(v){
                this.$refs['comproperty'].onTrialExtraTypeChange(v);
            },
            prev() {
                switch (this.step) {

                    case 0:
                        break;
                    case 1:
                        this.resetToken();
                        break;
                    case 2:
                        this.setStep(this.step - 1);
                        this.setAH("");
                        this.setTrialExtraId(0);
                        break;
                    case 3:
                        this.setStep(this.step - 1);
                        break;

                    case 4:
                        this.setStep(this.step - 1);
                        break;

                    case 5:
                        this.setStep(this.step - 1);
                        break;

                    // case 6:
                    //     this.setStep(this.step - 1);
                    //     break;

                }

            }
        }

    }
</script>

<style scoped>
    .tl{
        padding-top:20px;
        margin:0 auto;
        width: 80%;
        font-size: 3rem;
    }
    .bgcolor-white{
        background-color: white;
    }
    .bgcolor-eee{
        background-color: #eee;
    }
</style>